<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>模板语法指令</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{ txt }}
			<h1> vue 模板语法指令</h1>
			<p v-bind:hidden="pShow">绑定属性</p>
			<a v-bind:href="url">这个是连接</a>

			<br>
			<label>{{ check1Txt }}</label>
			<br>
			<input v-on:click="check1" type="button" value="点击我触发check1事件" />

		</div>
		<script type="text/javascript">
			var data = {
				txt: "这个是文本框",
				pShow: true,
				url: "www.baidu.com",
				check1Txt: "这个是check1文本",
			};

			var app = new Vue({
				el: "#app",
				data: data,
				methods: {
					check1: function() {
						data.check1Txt = "check1Txt";
						console.log("这是vue 第一个check 事件")
					}
				}
			})
		</script>
	</body>
</html>
